<script setup lang="ts">
import { ref } from "vue";

interface Props {
  avatar: string;
  messages_id: string;
  index: number;
}
const data = {
  messages_id: "",
  index: null
};
const popup = ref();

defineExpose({
  onShow(messages_id: string, index: number) {
    //@ts-ignore
    data.index = index;
    data.messages_id = messages_id;
    popup.value.open();
  }
});
const emit = defineEmits(["click"]);

const onClick = () => {
  popup.value.close();
  emit("click", data);
};
</script>

<template>
  <uv-popup ref="popup" mode="center" bgColor="none">
    <view class="red-pack">
      <Flex>
        <image
          src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/shop/Ellipse232.png"
          class="avatar"
        />
        <text class="name">只能AI导购发出的红包</text>
      </Flex>
      <text class="text">恭喜发财，大吉大利</text>
      <view class="button" @click="onClick"></view>
    </view>
  </uv-popup>
</template>

<style lang="scss" scoped>
.button {
  position: absolute;
  width: 103px;
  height: 103px;
  bottom: 60px;
  left: 50%;
  margin-left: -51.5px;
}
.text {
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  margin-top: 20px;
  display: block;
}
.red-pack {
  position: relative;
  width: 275px;
  height: 414px;
  background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/red-popup.png");
  background-size: cover;
  box-sizing: border-box;
  text-align: center;
  padding-top: 56px;
}
.avatar {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  margin-right: 10px;
  border: 1px solid rgba($color: #fff, $alpha: 0.8);
}
.name {
  color: rgba($color: #fff, $alpha: 0.8);
  font-size: 14px;
  font-weight: 400;
}
</style>
